<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*结合实际html结构*/
			*{
				font: 16px  "微软雅黑";
				/*去掉外边距	 */
				margin: 0;
				padding: 0;
				/* 去一个样式：去列表项 */
				list-style-type: none;
				/* 去全部样式 :list-style-type: ;
				              list-style-position去列表项标记位置样式
							  list-style-image去列表项图片标记样式
				 */
				list-style: none;
			}
			
			/*左栏效果
			 1.左栏空间区域 235*450  背景颜色
			 2.左栏内容 [li]   加权 235*50 相对定位-挂靠点【固定位置】
			 3.给每个区域内容【li】  加鼠标移动上去改背景颜色
			 4.左栏弹出框：400*450 边框 绝对定位-微调
			 */
			aside{
				width: 235px;
				height: 530px;
				background-color: red;
				margin: 30px 50px;
			}
			aside ul.sidebar li {
				
				width: 235px;
				height: 45px;
				/* 相对定位--挂靠点 */
				position: relative;
				
				background-color: #ababab;
				
				line-height: 45px;
				
				padding: 0 0 0 20px;
				color: white;
			}
			aside ul.sidebar li span{
				float: right;
				padding: 10px 50px 0 0;
				
			}
			aside ul.sidebar li:hover{
				background: orange;
				
			}
			aside ul.sidebar .out{
				width: 400px;
				height: 450px;
				
				position: absolute;
				left: 285px;
				border: 1px solid red;
				/* 显示与隐藏  JavaScript[JQuery框架] */
			}
			
		</style>
	</head>
	<body>
		<!-- html结构  结构化标记【语义化标签】  
		aside元素 针对：左栏、广告、、弹出效果...有利于SEO优化
		 之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
		 -->
		 <aside>
			 <ul class="sidebar">
				 <!-- 弹出框 -->
				 <div class="out"></div>
			 	<li>手机 平板 电话卡<span>></span></li>
			 	<li>电视 盒子<span>></span></li>
			 	<li>路由器 智能硬件<span>></span></li>
			 	<li>移动电源 插线板<span>></span></li>
			 	<li>耳机 音箱<span>></span></li>
			 	<li>电池 储存卡<span>></span></li>
			 	<li>保护套 后盖<span>></span></li>
				<li>贴膜 其他配件<span>></span></li>
			 	<li>米兔 服装<span>></span></li>
			 	<li>箱包 其他周边<span>></span></li>
			 </ul>
		 </aside>
		
		
	</body>
</html>